<template>
  <div>
    <div class="flex space-between align-center pb-15 border-bottom mb-20 mt-30">
      <b class="blue-line">{{ $t('other.monthCoefficient') }}</b>
      <div>
        <a-range-picker v-model:value="searchVal" @change="loadData" value-format="YYYY-MM-DD"/> 
      </div>
    </div>
    <a-form ref="makeForm" :model="dataSource">
      <a-table rowKey="uniqueId" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :scroll="{y: '264px'}" :pagination="false" class="form-table">
        <template #headerCell="{ column }"> 
          <template v-if="column.key === 'percent'">
            <span class="text-red">*</span>{{ $t('other.coefficient') }}
          </template> 
        </template>
        <template #bodyCell="{ column, record, index }">
          <template v-if="column.key === 'percent'">
            <a-form-item :name="[index, 'percent']"   :rules="[{ required: true, message: $t('common.pleaseInput'), trigger: 'change'}, { pattern: /^\d+(\.\d{0,2})?$/, message: $t('other.pleaseInputSureTypeKeepTwoPoint') }]">
              <a-input-number v-model:value="record.percent" allowClear :min="0" :max="100"  :placeholder="$t('common.pleaseInput')" class="full-width" />
           </a-form-item>
          </template>
        </template> 
      </a-table>
    </a-form>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import {monthColumns} from './config' 
import axios from '@/utils/request'
  let dataSource = ref([{a:2}])
  let loading = ref(false)
  let searchVal = ref()
  let columns = ref(monthColumns)
  let makeForm = ref()

  const loadData = async () => {
    loading.value = true
    let params = {
      startDate: searchVal.value?.length ? searchVal.value[0]: null,
      endDate: searchVal.value?.length ? searchVal.value[1]: null
    }
    try {
      const res = await axios.postAction('/api/system/verifyFactory/monthPercentPageList', params)
      dataSource.value =  res?.success ? res.data || [] : []
      loading.value = false
    } catch {
      dataSource.value =  []
      loading.value = false
    }
  }
  onMounted(async() => {
    await loadData() 
  })
  defineExpose({
    makeForm,
    dataSource,
    loadData
  })
</script>
